按鈕狀態

製作按鈕前要先規劃按鈕會有哪些狀態，與其在不同狀態下的樣式

例如：

1. hover: 當滑鼠移動到上面的狀態
2. active: 當使用者點下後的狀態
3. focus: 使用者使用鍵盤 tab 鍵選取目標的狀態
4. disable: 當按鈕不可以操作時的狀態

實作

• step 1: 建立資料夾 components/global/ ， Nuxt 預設 global 資料夾下的元件為全域
  https://nuxt.com/docs/guide/directory-structure/components

• step 2: 新增檔案 button.vue 到 global 資料夾下

  • 首先定義按鈕的狀態與型別，透過 props 方式來控制按鈕的狀態，並使用 withDefaults() 給予預設值
  • 這邊我預留了 btnClass 這個來控制 button 的顏色與樣式

  // button.vue
  <script lang="ts" setup>
  
  /** 定義按鈕型別 */
  export interface ButtonPropsType {
    /** 按鈕文字 */
    text?: string
    /** 是否 不可點擊 */
    isDisabled?: boolean
    /** 是否 載入狀態 */
    isLoading?: boolean
    /** 按鈕 外觀樣式 */
    btnClass?: string
    /** 按鈕 icon */
    icon?: string
    /** icon 樣式 */
    iconClass?: string
  }
  
  withDefaults(defineProps<ButtonPropsType>(), {
    text: '',
    isDisabled: false,
    isLoading: false,
    btnClass: 'bg-primary-600 text-white',
    icon: '',
    iconClass: 'text-[20px]',
  })
  </script>
  
  

  • 以下是按鈕的樣式～

  // button.vue
  <template>
    <button
      :disabled="isDisabled"
      class="btn inline-flex justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
      :class="`
      ${isLoading ? ' pointer-events-none' : ''}
      ${isDisabled ? ' opacity-40 cursor-not-allowed pointer-events-none' : ''}
      ${btnClass}
      `"
    >
      <template v-if="!isLoading && !$slots.default">
        <span class="flex items-center">
          <span
            v-if="icon"
            :class="`
            ${iconClass}
            `"
          >
            <Icon :name="icon"/>
          </span>
          <span v-if="text">{{ text }}</span>
        </span>
      </template>
      <template v-if="isLoading">
        <Icon name="svg-spinners:tadpole" class="size-5 mr-2" />
        Loading ...
      </template>
      <div v-if="$slots.default && !isLoading">
        <slot />
      </div>
    </button>
  </template>
  <style scoped>
  .btn {
    @apply font-semibold hover:scale-105 text-sm leading-6 md:px-6 md:py-3 px-4 py-[10px] rounded capitalize  transition-all duration-150 md:whitespace-nowrap whitespace-normal relative;
  }
  </style>
  

• step 3: 最後整理一下，在 pages/ 下新建立一個 button 頁面來呈現剛剛做好的 button元件 ～

  

  // pages/button.vue
  <template>
    <div class="flex items-center gap-x-2">
      <Button text="primary" isLoading />
      <Button text="primary" isDisabled />
      <Button text="Reward" icon="mingcute:award-fill" iconClass="text-yellow-500 mr-2" />
      <Button text="primary" />
    </div>
  </template>
  

  

  最後完成的樣子就是這樣囉～